<template>
  <div class="menu" :class="{ mobile: isMobile, close: !isMenuOpen }">
    <div class="menu-inner">
      <div class="menu-header">
        <h1 class="menu-mui">m-ui</h1>
      </div>
      <ul v-for="(group, groupKey) in menus" :key="groupKey" class="menu-list">
        <div class="group-category">
          {{ groupKey }}
        </div>
        <li
          v-for="menu in group.list"
          class="menu-list__li"
          @click="setIsMenuOpen()"
        >
          <router-link :to="'/components/' + menu.path">
            {{ menu.title }}
          </router-link>

          <ul
            v-show="menu.toc && menu.toc.length"
            class="menu-toc"
            :class="{ hidden: !showToc('/components/' + menu.path) }"
            :style="{
              height: showToc('/components/' + menu.path)
                ? menu.toc.length * 24 + 'px'
                : '0',
            }"
          >
            <template v-for="(i, idx) in menu.toc" :key="`${i.anchor}-${idx}`">
              <li v-if="i.level && i.level > 1" class="menu-toc__li">
                <a
                  :href="'#' + i.anchor"
                  :class="{
                    active: activeTocLink('#' + i.anchor),
                  }"
                >
                  {{ i.content }}
                </a>
              </li>
            </template>
          </ul>
          <!--            <transition name="menu-toc-fade">-->
          <!--           </transition>-->
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { routes } from "/@/documentation/route";
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useAppStore } from "/@/documentation/store/app";

const props = defineProps({
  isMobile: {
    type: Boolean,
    default: false,
  },
  isMenuOpen: {
    type: Boolean,
    default: true,
  },
});
const router = useRouter();
const appStore = useAppStore();
const menus = computed(() => {
  return routes
    .find((r) => {
      return r.path === "/components";
    })
    .children.map((r) => {
      return {
        path: r.path,
        category: r?.meta?.category || "other",
        title: r.meta?.title || r.path,
        toc: r?.component?.$vd?.toc || [],
      };
    })
    .reduce((memo, cur) => {
      const c = memo[cur.category];
      if (!c || !c.list) {
        memo[cur.category] = {
          list: [cur],
        };
      } else {
        memo[cur.category].list.push(cur);
      }
      return memo;
    }, {});
});

const route = useRoute();

const showToc = (path) => {
  return path === route.path;
};

const activeTocLink = (hash) => {
  return route.hash && hash === route.hash;
};

const setIsMenuOpen = () => {
  if (appStore.isMobile) {
    appStore.setIsMenuOpen(false);
  }
};
</script>

<style lang="scss"></style>

<style lang="scss" scoped>
.menu {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  background-color: #f2f5fa;
  box-sizing: border-box;
  transition: left 0.3s;
  padding: 80px 0 30px;

  .menu-toc {
    transition: all 0.3s;
    padding-left: 16px;
    overflow: hidden;
    margin-top: 0;
    margin-left: 14px;
    font-size: 0.9em;
    li.menu-toc__li {
      box-sizing: border-box;
      height: 24px;
      color: #454d64;
      line-height: 24px;
      font-size: 14px;
      list-style: none;

      a {
        line-height: 2.4;
        position: relative;
        display: block;
        padding: 0;
        transition: all 0.3s;
        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: -10px;
          margin-top: -2.5px;
          display: inline-block;
          width: 5px;
          height: 5px;
          background-color: #4569d4;
          border-radius: 50%;
          opacity: 0;
          transition: transform 0.2s, opacity 0.2s;
          transform: scale(0) translateX(-10px);
        }
        &.active {
          color: var(--color-primary);
          &::before {
            opacity: 1;
            transform: scale(1) translateX(0);
          }
        }
        &:hover {
          color: var(--color-primary);
        }
      }
    }
    &.hidden {
      overflow: hidden;
      height: 0;
    }
  }

  &.mobile {
    top: 50px;
    width: 300px;
    padding-top: 30px;
  }
  &.close {
    left: -300px;
  }
  &-inner {
    width: 100%;
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    .menu-header {
      position: relative;
      padding-top: 0;
      text-align: center;
      border-bottom: 1px solid #ebedf1;
      .menu-mui {
        margin: 10px 0 0;
        color: #454d64;
        font-weight: 500;
        line-height: 1.40625;
        text-align: center;
      }
    }
  }
  &-list {
    margin-bottom: 10px;
    padding: 0;
    .group-category {
      font-size: 12px;
      border-bottom: 1px solid #d4d4d4;
      padding-bottom: 4px;
      padding-left: 14px;
      margin-bottom: 8px;
    }
    &__li {
      //margin-bottom: 10px;
    }
    li.menu-list__li {
      padding: 0;

      list-style-type: none;
      color: #454d64;
      font-size: 12px;

      a {
        font-size: 12px;
        font-weight: 400;
        display: inline-block;
        color: #2c3e50;
        padding: 0 14px;
        width: 100%;
        box-sizing: border-box;
        text-decoration: none;
        transition: all 0.3s;
        line-height: 2.875;

        &.router-link-active {
          color: var(--color-primary);
          background: linear-gradient(to left, #e8ecf4, rgba(232, 236, 244, 0));
        }
        &:hover {
          color: var(--color-primary);
        }
      }
    }
  }
}
</style>
